<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html {
            display: table;
            width: 100%;
            height: 100%;
        }
        body {
            background: #000;
            margin: 0;
            font-size: 25px;
            text-align: center;
            vertical-align: middle;
            display: table-cell;
        }
        .on,
        .off {
            width: 1em;
            height: 1em;
            border-radius: 1.5em;
            display: inline-block;
            margin: 0.5em;
        }
        .off {
            background-color: #002b2b;
        }
        .on {
            background-color: #3fb;
            background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, .5) 10%, transparent 100%);
            box-shadow: 0 0 8px 6px rgba(26, 255, 179, .4);
            -webkit-transition: background-color 0.2s, box-shadow 0.2s;
        }
        #minutes .off {
            background-color: #00152b;
        }
        #minutes .on {
            background-color: #57e2ff;
            box-shadow: 0 0 8px 6px rgba(26, 171, 255, .4);
        }
        #hours .off {
            background-color: #1c002b;
        }
        #hours .on {
            background-color: #8c57ff;
            box-shadow: 0 0 8px 6px rgba(247, 26, 255, .4);
        }
        #day .off {
            background-color: #2b0000;
        }
        #day .on {
            background-color: #ff578f;
            box-shadow: 0 0 8px 6px rgba(255, 69, 131, .4);
        }
        #month .off {
            background-color: #2b2000;
        }
        #month .on {
            background-color: #ff8c57;
            box-shadow: 0 0 8px 6px rgba(255, 124, 63, .4);
        }
        #year .off {
            background-color: #2b2a00;
        }
        #year .on {
            background-color: #fffc57;
            box-shadow: 0 0 8px 6px rgba(255, 251, 56, .4);
        }
    </style>
</head>
<body>

</body>
</html>

<script>
    var keys = ['seconds', 'minutes', 'hours', 'day', 'month', 'year'],
            prevValueMap = {};

    function numToBinary(num) {
        var result = [],
                quotient = num,
                remainder = 0;

        while (quotient > 0) {
            remainder = quotient % 2;
            quotient = (quotient - remainder) / 2;
            result.unshift(remainder);
        }

        return result;
    }

    function arrEquals(a1, a2) {
        if (!a1 || !a2 || a1.length !== a2.length) {
            return false;
        }

        for (var i = a1.length - 1; i >= 0; i--) {
            if (a1[i] !== a2[i]) {
                return false;
            }
        }

        return true;
    }

    function update() {
        var now = new Date();

        updateRow('seconds', numToBinary(now.getSeconds()));
        updateRow('minutes', numToBinary(now.getMinutes()));
        updateRow('hours', numToBinary(now.getHours()));
        updateRow('day', numToBinary(now.getDate()));
        updateRow('month', numToBinary(now.getMonth() + 1));
        updateRow('year', numToBinary(now.getYear() - 100));

        setTimeout(update, 1000);
    }

    function updateRow(id, values) {

        if (arrEquals(prevValueMap[id], values)) {
            return;
        }

        prevValueMap[id] = values.slice();

        var c = document.getElementById(id);

        for (var i = c.childNodes.length - 1; i >= 0; i--) {
            var on = values.length ? values.pop() : 0;
            c.childNodes[i].className = on === 1 ? 'on' : 'off';
        }
    }

    function init() {
        keys.forEach(function(value, index) {
            var container = document.createElement('div');
            container.id = value;

            container.innerHTML = Array(7).join('<div class="off"></div>');

            document.body.appendChild(container);
        });
    }

    init();
    update();
</script>